<template>
	<view class="wrapper">
		<view class="uni-segmented-control-wrapper">
			<scroll-view v-if="scrollViewVisible" scroll-x :scroll-left="scrollLeft" scroll-with-animation
				class="scroll-wrapper" :scroll-with-animation="true">
				<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button"
					activeColor="#4BB7DB" inActiveColor="#f2f3f5"></uni-segmented-control>
			</scroll-view>
			<view class="content">
				<!-- 基础表单校验 -->
				<uni-forms ref="valiForm" :rules="rules" :model="valiFormData" labelWidth="0">
					<view v-show="current === 0">
						<uni-forms-item label="" name="childName">
							<uni-easyinput v-model="valiFormData.childName" placeholder="姓名(必填)" />
						</uni-forms-item>
						<uni-forms-item label="" name="childType">
							<uni-data-select v-model="valiFormData.childType" :localdata="rangechildType"
								placeholder="类型"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="" name="childSex">
							<uni-data-select v-model="valiFormData.childSex" :localdata="rangechildSex"
								placeholder="性别"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="" name="childNationality">
							<uni-data-select v-model="valiFormData.childNationality" :localdata="rangeChildNationality"
								placeholder="民族"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="" name="childRegisteredAddress">
							<uni-easyinput v-model="valiFormData.childRegisteredAddress" placeholder="户籍地址" />
						</uni-forms-item>
						<uni-forms-item label="" name="applyDate">
							<uni-datetime-picker type="date" :clear-icon="true" v-model="valiFormData.applyDate"
								placeholder="申请日期" />
						</uni-forms-item>
						<uni-forms-item label="" name="childIdCardNumber">
							<uni-easyinput v-model="valiFormData.childIdCardNumber" placeholder="身份证号" />
						</uni-forms-item>
						<uni-forms-item label="" name="childHomeAddress">
							<uni-easyinput v-model="valiFormData.childHomeAddress" placeholder="儿童现住址" />
						</uni-forms-item>
						<uni-forms-item label="" name="childHealthStatus">
							<uni-data-select v-model="valiFormData.childHealthStatus"
								:localdata="rangechildHealthStatus" placeholder="身体状况"
								placement="top"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="" name="childEducationStatus">
							<uni-data-select v-model="valiFormData.childEducationStatus"
								:localdata="rangechildEducationStatus" placeholder="工学情况"
								placement="top"></uni-data-select>
						</uni-forms-item>
					</view>
					<!--父亲信息-->
					<view v-show="current === 1">
						<uni-forms-item label="" name="fatherName">
							<uni-easyinput v-model="valiFormData.fatherName" placeholder="姓名" />
						</uni-forms-item>

						<uni-forms-item label="" name="fatherIdCardNumber">
							<uni-easyinput v-model="valiFormData.fatherIdCardNumber" placeholder="身份证号" />
						</uni-forms-item>

						<uni-forms-item label="" name="fatherStatus">
							<uni-data-select v-model="valiFormData.fatherStatus" :localdata="rangeStatus"
								placeholder="现状况"></uni-data-select>
						</uni-forms-item>

						<uni-forms-item label="" name="fatherPhoneNumber">
							<uni-easyinput v-model="valiFormData.fatherPhoneNumber" placeholder="联系联系方式" />
						</uni-forms-item>
					</view>
					<!--信息母亲-->
					<view v-show="current === 2">
						<uni-forms-item label="" name="motherName">
							<uni-easyinput v-model="valiFormData.motherName" placeholder="姓名" />
						</uni-forms-item>

						<uni-forms-item label="" name="motherIdCardNumber">
							<uni-easyinput v-model="valiFormData.motherIdCardNumber" placeholder="身份证号" />
						</uni-forms-item>

						<uni-forms-item label="" name="motherStatus">
							<uni-data-select v-model="valiFormData.motherStatus" :localdata="rangeStatus"
								placeholder="现状况"></uni-data-select>
						</uni-forms-item>

						<uni-forms-item label="" name="motherPhoneNumber">
							<uni-easyinput v-model="valiFormData.motherPhoneNumber" placeholder="联系联系方式" />
						</uni-forms-item>
					</view>
					<view v-show="current === 3">
						<uni-forms-item label="" name="name">
							<uni-easyinput v-model="valiFormData.guardianList[0].name" placeholder="姓名" />
						</uni-forms-item>
						<uni-forms-item label="" name="sex">
							<uni-data-select v-model="valiFormData.guardianList[0].sex" :localdata="rangeSex"
								placeholder="性别"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="" name="relationship">
							<uni-easyinput v-model="valiFormData.guardianList[0].relationship" placeholder="关系" />
						</uni-forms-item>
						<uni-forms-item label="" name="idCardNumber">
							<uni-easyinput v-model="valiFormData.guardianList[0].idCardNumber" placeholder="身份证号" />
						</uni-forms-item>
						<uni-forms-item label="" name="workUnitOrHomeAddress">
							<uni-easyinput v-model="valiFormData.guardianList[0].workUnitOrHomeAddress"
								placeholder="地址" />
						</uni-forms-item>
						<uni-forms-item label="" name="phoneNumber">
							<uni-easyinput v-model="valiFormData.guardianList[0].phoneNumber" placeholder="联系方式" />
						</uni-forms-item>
					</view>
					<view v-show="current === 4">
						<uni-forms-item label="" name="townOfficer">
							<uni-easyinput v-model="valiFormData.jieduibaobao[0].townOfficer" placeholder="乡镇干部姓名" />
						</uni-forms-item>
						<uni-forms-item label="" name="townOfficerPhone">
							<uni-easyinput v-model="valiFormData.jieduibaobao[0].townOfficerPhone"
								placeholder="乡镇干部联系方式" />
						</uni-forms-item>
						<uni-forms-item label="" name="villageOfficer">
							<uni-easyinput v-model="valiFormData.jieduibaobao[0].villageOfficer" placeholder="村干部姓名" />
						</uni-forms-item>
						<uni-forms-item label="" name="villageOfficerPhone">
							<uni-easyinput v-model="valiFormData.jieduibaobao[0].villageOfficerPhone"
								placeholder="村干部联系方式" />
						</uni-forms-item>
						<uni-forms-item label="" name="schoolOfficer">
							<uni-easyinput v-model="valiFormData.jieduibaobao[0].schoolOfficer" placeholder="学校名称" />
						</uni-forms-item>
						<uni-forms-item label="" name="schoolOfficerPhone">
							<uni-easyinput v-model="valiFormData.jieduibaobao[0].schoolOfficerPhone"
								placeholder="学校联系方式" />
						</uni-forms-item>
					</view>
					<view v-show="current === 5">
						<uni-forms-item label="" name="subsidyReceiveType">
							<uni-data-select v-model="valiFormData.subsidyReceiveType"
								:localdata="rangeSubsidyReceiveType" placeholder="领取方式"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="" name="subsidyReceiveDate">
							<uni-datetime-picker type="date" :clear-icon="true"
								v-model="valiFormData.subsidyReceiveDate" placeholder="起领年月" />
						</uni-forms-item>
						<uni-forms-item label="" name="subsidyMoney">
							<uni-easyinput v-model="valiFormData.subsidyMoney" placeholder="保障金额" />
						</uni-forms-item>
						<uni-forms-item label="" name="subsidyAccountOwner">
							<uni-easyinput v-model="valiFormData.subsidyAccountOwner" placeholder="开户人" />
						</uni-forms-item>
						<uni-forms-item label="" name="subsidyReceiveName">
							<uni-easyinput v-model="valiFormData.subsidyReceiveName" placeholder="领取人" />
						</uni-forms-item>
						<uni-forms-item label="" name="subsidyReceiveRelationship">
							<uni-data-select v-model="valiFormData.subsidyReceiveRelationship"
								:localdata="rangeSubsidyReceiveRelationship" placeholder="领取人与儿童关系"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="" name="subsidyAccountBank">
							<uni-data-select v-model="valiFormData.subsidyAccountBank"
								:localdata="rangeSubsidyAccountBank" placeholder="开户银行"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="" name="subsidyAccountNumber">
							<uni-easyinput v-model="valiFormData.subsidyAccountNumber" placeholder="银行账户" />
						</uni-forms-item>
						<uni-forms-item label="" name="houseImageNameUploaded" class="button-container">
							<button type="default" @click="handleHouseImageUpload" class="report-button" size="mini"
								style="margin-left: 0;"><uni-icons
									type="plusempty"></uni-icons>房屋照片</button><span>{{ valiFormData.houseImageNameUploaded }}</span>
						</uni-forms-item>
						<uni-forms-item label="" name="visitImageNameUploaded" class="button-container">
							<button type="default" @click="handleVisitImageUpload" class="report-button" size="mini"
								style="margin-left: 0;"><uni-icons
									type="plusempty"></uni-icons>走访照片</button><span>{{ valiFormData.visitImageNameUploaded }}</span>
						</uni-forms-item>
					</view>
				</uni-forms>
			</view>
		</view>

		<div class="space"></div>

		<button type="primary" @click="submit(valiForm)">提交</button>
	</view>
</template>

<script setup>
	import {
		ref,
		nextTick
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		HOST
	} from "../../static/js/const";
	import qs from 'qs';

	let scrollViewVisible = ref(true);
	const scrollLeft = ref(0); // 控制横向滚动位置

	const items = ref(['儿童信息', '父亲信息', '母亲信息', '履行监护责任人员情况', '结对包保人员情况', '基本生活补贴发放情况']);
	const current = ref(0);
	let scrollIntoView = 0;

	const valiForm = ref(null);

	function onClickItem(e) {
		if (current.value !== e.currentIndex) {
			current.value = e.currentIndex;

			if (e.currentIndex !== 0 && !valiFormData.value.childName) {
				uni.showToast({
					title: "孤儿姓名不能为空",
					icon: "none"
				});
			};
		}
	}

	let valiFormData = ref({
		childName: "",
		childType: "",
		childSex: "",
		childNationality: "",
		childRegisteredAddress: "",
		applyDate: "",
		childIdCardNumber: "",
		childHomeAddress: "",
		childHealthStatus: "",
		// childHealthStatusOther: "",
		childEducationStatus: "",
		// childEducationStatusOther: "",
		subsidyReceiveType: "",
		subsidyReceiveDate: "",
		subsidyMoney: "",
		subsidyAccountOwner: "",
		subsidyReceiveName: "",
		subsidyReceiveRelationship: "",
		subsidyAccountBank: "",
		subsidyAccountNumber: "",
		fatherName: "",
		fatherIdCardNumber: "",
		fatherStatus: "",
		// fatherStatusOther: "",
		fatherPhoneNumber: "",
		motherName: "",
		motherIdCardNumber: "",
		motherStatus: "",
		// motherStatusOther: "",
		motherPhoneNumber: "",
		houseImages: [],
		houseImageNameUploaded: "",
		houseImageIdArr: "",
		visitImages: [],
		visitImageNameUploaded: "",
		visitImageIdArr: "",
		guardianList: [{ // 履行监护责任人员情况
			name: "",
			sex: "",
			relationship: "",
			idCardNumber: "",
			workUnitOrHomeAddress: "",
			phoneNumber: ""
		}],
		jieduibaobao: [{ // 结对包保人员情况
			townOfficer: "",
			townOfficerPhone: "",
			villageOfficer: "",
			villageOfficerPhone: "",
			schoolOfficer: "",
			schoolOfficerPhone: ""
		}],
	});

	// 类型
	const rangechildType = ref([{
			value: "0",
			text: "孤儿"
		},
		{
			value: "1",
			text: "事无儿童"
		}
	]);

	// 性别
	const rangechildSex = ref([{
			value: "0",
			text: "男"
		},
		{
			value: "1",
			text: "女"
		}
	]);

	// 民族
	const rangeChildNationality = ref([{
			"text": "汉族",
			"value": "1",
		},
		{
			"text": "瑶族",
			"value": "13",
		},
		{
			"text": "蒙古族",
			"value": "2",
		},
		{
			"text": "回族",
			"value": "3",
		},
		{
			"text": "藏族",
			"value": "4",
		},
		{
			"text": "维吾尔族",
			"value": "5",
		},
		{
			"text": "苗族",
			"value": "6",
		},
		{
			"text": "彝族",
			"value": "7",
		},
		{
			"text": "壮族",
			"value": "8",
		},
		{
			"text": "布依族",
			"value": "9",
		},
		{
			"text": "朝鲜族",
			"value": "10",
		},
		{
			"text": "满族",
			"value": "11",
		},
		{
			"text": "侗族",
			"value": "12",
		},
		{
			"text": "白族",
			"value": "14",
		},
		{
			"text": "土家族",
			"value": "15",
		},
		{
			"text": "哈尼族",
			"value": "16",
		},
		{
			"text": "哈萨克族",
			"value": "17",
		},
		{
			"text": "傣族",
			"value": "18",
		},
		{
			"text": "黎族",
			"value": "19",
		},
		{
			"text": "傈僳族",
			"value": "20",
		},
		{
			"text": "佤族",
			"value": "21",
		},
		{
			"text": "畲族",
			"value": "22",
		},
		{
			"text": "高山族",
			"value": "23",
		},
		{
			"text": "拉祜族",
			"value": "24",
		},
		{
			"text": "水族",
			"value": "25",
		},
		{
			"text": "东乡族",
			"value": "26",
		},
		{
			"text": "纳西族",
			"value": "27",
		},
		{
			"text": "景颇族",
			"value": "28",
		},
		{
			"text": "柯尔克孜族",
			"value": "29",
		},
		{
			"text": "土族",
			"value": "30",
		},
		{
			"text": "达斡尔族",
			"value": "31",
		},
		{
			"text": "仫佬族",
			"value": "32",
		},
		{
			"text": "羌族",
			"value": "33",
		},
		{
			"text": "布朗族",
			"value": "34",
		},
		{
			"text": "撒拉族",
			"value": "35",
		},
		{
			"text": "毛南族",
			"value": "36",
		},
		{
			"text": "仡佬族",
			"value": "37",
		},
		{
			"text": "锡伯族",
			"value": "38",
		},
		{
			"text": "阿昌族",
			"value": "39",
		},
		{
			"text": "普米族",
			"value": "40",
		},
		{
			"text": "塔吉克族",
			"value": "41",
		},
		{
			"text": "怒族",
			"value": "42",
		},
		{
			"text": "乌孜别克族",
			"value": "43",
		},
		{
			"text": "俄罗斯族",
			"value": "44",
		},
		{
			"text": "鄂温克族",
			"value": "45",
		},
		{
			"text": "德昂族",
			"value": "46",
		},
		{
			"text": "保安族",
			"value": "47",
		},
		{
			"text": "裕固族",
			"value": "48",
		},
		{
			"text": "京族",
			"value": "49",
		},
		{
			"text": "塔塔尔族",
			"value": "50",
		},
		{
			"text": "独龙族",
			"value": "51",
		},
		{
			"text": "鄂伦春族",
			"value": "52",
		},
		{
			"text": "赫哲族",
			"value": "53",
		},
		{
			"text": "门巴族",
			"value": "54",
		},
		{
			"text": "珞巴族",
			"value": "55",
		},
		{
			"text": "基诺族",
			"value": "56",
		},
		{
			"text": "未定族称人口",
			"value": "57",
		},
		{
			"text": "入籍",
			"value": "入籍",
		}
	]);

	// 身体状况
	const rangechildHealthStatus = ref([{
			value: "1",
			text: "健康"
		},
		{
			value: "2",
			text: "视力残疾"
		},
		{
			value: "3",
			text: "听力残疾"
		},
		{
			value: "4",
			text: "言语残疾"
		},
		{
			value: "5",
			text: "智力残疾"
		},
		{
			value: "6",
			text: "肢体残疾"
		},
		{
			value: "7",
			text: "精神残疾"
		},
		{
			value: "8",
			text: "多重残疾"
		},
		{
			value: "9",
			text: "重病"
		},
		{
			value: "10",
			text: "其他"
		}
	]);

	// 工学情况
	const rangechildEducationStatus = ref([{
			value: "1",
			text: "学龄前"
		},
		{
			value: "2",
			text: "小学"
		},
		{
			value: "3",
			text: "初中"
		},
		{
			value: "4",
			text: "高中或职业高中"
		},
		{
			value: "5",
			text: "技校"
		},
		{
			value: "6",
			text: "中专"
		},
		{
			value: "7",
			text: "大专"
		},
		{
			value: "8",
			text: "失学"
		},
		{
			value: "9",
			text: "特教"
		},
		{
			value: "10",
			text: "无就学能力"
		},
		{
			value: "11",
			text: "待业"
		},
		{
			value: "12",
			text: "就业"
		},
		{
			value: "13",
			text: "其它"
		}
	]);

	// 现状况
	const rangeStatus = ref([{
			value: "1",
			text: "死亡"
		},
		{
			value: "2",
			text: "失踪"
		},
		{
			value: "3",
			text: "重病"
		},
		{
			value: "4",
			text: "重残"
		},
		{
			value: "5",
			text: "失联"
		},
		{
			value: "6",
			text: "服刑在押"
		},
		{
			value: "7",
			text: "强制隔离戒毒"
		},
		{
			value: "8",
			text: "被执行其他限制人身自由的措施"
		},
		{
			value: "9",
			text: "其他"
		}
	])

	// 性别
	const rangeSex = ref([{
			value: "0",
			text: "男"
		},
		{
			value: "1",
			text: "女"
		}
	])

	// 领取方式
	const rangeSubsidyReceiveType = ref([{
		"value": "1",
		"text": "现金领取",
	}, {
		"value": "2",
		"text": "银行转账",
	}]);

	const rangeSubsidyReceiveRelationship = ref([{
			"text": "祖父母",
			"value": "1",
		},
		{
			"text": "外祖父母",
			"value": "2",
		},
		{
			"text": "叔(婶)",
			"value": "3",
		},
		{
			"text": "伯(母)",
			"value": "4",
		},
		{
			"text": "姑(父）",
			"value": "5",
		},
		{
			"text": "舅(母)",
			"value": "6",
		},
		{
			"text": "姨(父)",
			"value": "7",
		},
		{
			"text": "成年兄姐",
			"value": "8",
		},
		{
			"text": "其他",
			"value": "9",
		}
	])

	// 开户银行
	const rangeSubsidyAccountBank = ref([{
		"text": "农商行",
		"value": 0,
	}])

	const rules = ref({})

	function change(e) {
		console.log("e:", e);
	};

	const handleHouseImageUpload = () => {
		uni.chooseImage({
			count: 1, // 一次选择一张图片
			sizeType: ['original', 'compressed'], // 可选择原图或者压缩图
			sourceType: ['album', 'camera'], // 可从相册或者相机选取图片
			success: (res) => {
				const tempFilePaths = res.tempFilePaths;
				const index = tempFilePaths[0].lastIndexOf("/");
				valiFormData.value.houseImageNameUploaded = tempFilePaths[0].substring(index);

				if (tempFilePaths) {
					uni.uploadFile({
						url: `${HOST}/dir/from/orphan/houseImage/save`,
						filePath: tempFilePaths[0],
						header: {
							'Authorization': 'Bearer ' + uni.getStorageSync('accessToken')
						},
						name: 'houseImages[0].attachmentFile',
						formData: {
							// 'houseImages[0].attachmentFile': tempFilePaths[0]
						},
						success: (res) => {
							const uploadFileRes = JSON.parse(res.data);
							if (uploadFileRes.flag) {
								valiFormData.value.houseImageIdArr = uploadFileRes.data;
							} else {
								uni.showToast({
									title: uploadFileRes["message"],
									icon: "fail"
								});
							}
						},
						fail: (err) => {
							console.log('上传失败:', err);
							uni.showToast({
								title: "连接失败",
								icon: "error"
							});
						}
					});
				}
			},
			fail: (err) => {
				console.log(err);
			}
		});
	}

	const handleVisitImageUpload = () => {
		uni.chooseImage({
			count: 1, // 一次选择一张图片
			sizeType: ['original', 'compressed'], // 可选择原图或者压缩图
			sourceType: ['album', 'camera'], // 可从相册或者相机选取图片
			success: (res) => {
				const tempFilePaths = res.tempFilePaths;
				const index = tempFilePaths[0].lastIndexOf("/");
				valiFormData.value.visitImageNameUploaded = tempFilePaths[0].substring(index);

				if (tempFilePaths.length > 0) {
					uni.uploadFile({
						url: `${HOST}/dir/from/orphan/visitImage/save`, //仅为示例，非真实的接口地址
						filePath: tempFilePaths[0],
						header: {
							'Authorization': 'Bearer ' + uni.getStorageSync('accessToken')
						},
						name: 'visitImages[0].attachmentFile',
						formData: {
							// 'visitImages[0].attachmentFile': tempFiles[0]
						},
						success: (res) => {
							const uploadFileRes = JSON.parse(res.data);
							if (uploadFileRes.flag) {
								valiFormData.value.visitImageIdArr = uploadFileRes.data;
							} else {
								uni.showToast({
									title: uploadFileRes["message"],
									icon: "fail"
								});
							}
						},
						fail: (err) => {
							console.log('上传失败:', err);
							uni.showToast({
								title: "连接失败",
								icon: "error"
							});
						}
					});
				}
			},
			fail: (err) => {
				console.log(err);
			}
		});
	}

	function submit(ref) {
		if (!valiFormData.value.childName) {
			uni.showToast({
				title: "孤儿姓名不能为空",
				icon: "none"
			});
			scrollViewVisible.value = false;
			nextTick(() => {
				scrollViewVisible.value = true;
				scrollLeft.value = 0; // 将滚动位置重置为0（最左侧）
			})
			current.value = 0;
			return;
		};

		ref.validate().then(res => {
			const formData = {};

			for (const key in valiFormData.value) {
				if (valiFormData.value.hasOwnProperty(key) && (key !== "guardianList" && key !== "jieduibaobao" &&
						key !== "houseImages" && key !== "visitImages")) { // 过滤继承属性
					console.log(`Key: ${key}, Value: ${valiFormData.value[key]}`);
					formData[key] = valiFormData.value[key];
				}
			}

			for (let i = 0; i < valiFormData.value.guardianList.length; i++) {
				formData[`guardianList[${i}].name`] = valiFormData.value.guardianList[i]["name"];
				formData[`guardianList[${i}].sex`] = valiFormData.value.guardianList[i]["sex"];
				formData[`guardianList[${i}].relationship`] = valiFormData.value.guardianList[i]["relationship"];
				formData[`guardianList[${i}].idCardNumber`] = valiFormData.value.guardianList[i]["idCardNumber"];
				formData[`guardianList[${i}].workUnitOrHomeAddress`] = valiFormData.value.guardianList[i][
					"workUnitOrHomeAddress"
				];
				formData[`guardianList[${i}].phoneNumber`] = valiFormData.value.guardianList[i]["phoneNumber"];
			}

			formData['protectTownPersonList[0].name'] = valiFormData.value.jieduibaobao[0]["townOfficer"];
			formData['protectTownPersonList[0].phoneNumber'] = valiFormData.value.jieduibaobao[0][
				"townOfficerPhone"
			];
			formData['protectVillagePersonList[0].name'] = valiFormData.value.jieduibaobao[0]["villageOfficer"];
			formData['protectVillagePersonList[0].phoneNumber'] = valiFormData.value.jieduibaobao[0][
				"villageOfficerPhone"
			];
			formData['protectSchoolPersonList[0].name'] = valiFormData.value.jieduibaobao[0]["schoolOfficer"];
			formData['protectSchoolPersonList[0].phoneNumber'] = valiFormData.value.jieduibaobao[0][
				"schoolOfficerPhone"
			];

			if (valiFormData.value.houseImageIdArr) {
				formData['houseImageIdArr'] = valiFormData.value.houseImageIdArr;
			}

			if (valiFormData.value.visitImageIdArr) {
				formData['visitImageIdArr'] = valiFormData.value.visitImageIdArr;
			}

			// 生成带 boundary 的多部分数据
			const boundary = '----uni-app-boundary-' + Date.now();
			const body = qs.stringify(formData, {
				arrayFormat: 'brackets',
				encode: false, // 禁止自动编码，手动处理
				indices: false
			}).split('&').map(pair => {
				const [key, value] = pair.split('=');
				return `--${boundary}\r\nContent-Disposition: form-data; name="${key}"\r\n\r\n${value}\r\n`;
			}).join('') + `--${boundary}--\r\n`;
			
			console.log("body");
			console.log(body);

			// begin
			uni.request({
				url: `${HOST}/dir/from/orphan/update`,
				method: 'POST',
				data: body,
				header: {
					'Content-Type': `multipart/form-data; boundary=${boundary}`,
					'Authorization': 'Bearer ' + uni.getStorageSync('accessToken')
				},
				success: (res) => {
					if (res.data.status === "OK" && res.data.flag) {
						uni.showToast({
							title: "编辑成功",
							icon: "success"
						});
						
						setTimeout(() => {
							uni.navigateBack({
								delta: 1 // 返回上一页
							});
						}, 1000)
					} else if (Number(res.data.code) === 401) {
						uni.showToast({
							title: "登录超时",
							icon: "error"
						});
						uni.removeStorageSync('accessToken');
						uni.reLaunch({
							url: '/pages/login/index' // 这里的URL是登录页面的路径
						});
					} else {
						uni.showToast({
							title: res.data.message,
							icon: "error"
						});
					}
				},
				fail: (err) => {
					console.error('请求失败', err);
					uni.showToast({
						title: "连接失败",
						icon: "error"
					});
				}
			});

			// end
			// uni.showToast({
			// 	title: `校验通过`
			// })
		}).catch(err => {
			console.log('err', err);
		})
	};
	
	const handleGetDetail = (id) => {
		uni.request({
			url: `${HOST}/dir/from/orphan/detail`,
			method: "POST",
			header: {
				"content-type": "application/json",
				Authorization: "Bearer " + uni.getStorageSync("accessToken"),
			},
			data: {
				id
			},
			success: (res) => {
				if (res.data.status === "OK" && res.data.flag) {
					// valiFormData.value = res.data.data;
					// begin
					valiFormData.value.id = id;
					valiFormData.value.childName = res.data.data.childName;
					valiFormData.value.childType = res.data.data.childType;
					valiFormData.value.childSex = res.data.data.childSex;
					valiFormData.value.childNationality = res.data.data.childNationality;
					valiFormData.value.childRegisteredAddress = res.data.data.childRegisteredAddress;
					valiFormData.value.applyDate = res.data.data.applyDate;
					valiFormData.value.childIdCardNumber = res.data.data.childIdCardNumber;
					valiFormData.value.childHomeAddress = res.data.data.childHomeAddress;
					valiFormData.value.childHealthStatus = res.data.data.childHealthStatus;
					// childHealthStatusOther = res.data.data;
					valiFormData.value.childEducationStatus = res.data.data.childEducationStatus;
					// childEducationStatusOther = res.data.data;
					valiFormData.value.subsidyReceiveType = res.data.data.subsidyReceiveType;
					valiFormData.value.subsidyReceiveDate = res.data.data.subsidyReceiveDate;
					valiFormData.value.subsidyMoney = res.data.data.subsidyMoney;
					valiFormData.value.subsidyAccountOwner = res.data.data.subsidyAccountOwner;
					valiFormData.value.subsidyReceiveName = res.data.data.subsidyReceiveName;
					valiFormData.value.subsidyReceiveRelationship = res.data.data.subsidyReceiveRelationship;
					valiFormData.value.subsidyAccountBank = res.data.data.subsidyAccountBank;
					valiFormData.value.subsidyAccountNumber = res.data.data.subsidyAccountNumber;
					valiFormData.value.fatherName = res.data.data.fatherName;
					valiFormData.value.fatherIdCardNumber = res.data.data.fatherIdCardNumber;
					valiFormData.value.fatherStatus = res.data.data.fatherStatus;
					// fatherStatusOther = res.data.data;
					valiFormData.value.fatherPhoneNumber = res.data.data.fatherPhoneNumber;
					valiFormData.value.motherName = res.data.data.motherName;
					valiFormData.value.motherIdCardNumber = res.data.data.motherIdCardNumber;
					valiFormData.value.motherStatus = res.data.data.motherStatus;
					// motherStatusOther = res.data.data;
					valiFormData.value.motherPhoneNumber = res.data.data.motherPhoneNumber;
					// end
					valiFormData.value.guardianList = res.data.data.guardianList;
	
					const protectTownPersonListLen = res.data.data.protectTownPersonList.length;
					const protectVillagePersonListLen = res.data.data.protectVillagePersonList.length;
					const protectSchoolPersonListLen = res.data.data.protectSchoolPersonList.length;
					const maxNumber = Math.max(protectTownPersonListLen, protectVillagePersonListLen,
						protectSchoolPersonListLen);
					valiFormData.value.jieduibaobao = [];
					for (let i = 0; i < maxNumber; i++) {
						const data = {
							id: Date.now(),
							townOfficer: "",
							townOfficerPhone: "",
							villageOfficer: "",
							villageOfficerPhone: "",
							schoolOfficer: "",
							schoolOfficerPhone: ""
						};
	
						if (i < protectTownPersonListLen) {
							data["townOfficer"] = res.data.data.protectTownPersonList[i]["name"];
							data["townOfficerPhone"] = res.data.data.protectTownPersonList[i]["phoneNumber"];
						} else {
							data["townOfficer"] = "";
							data["townOfficerPhone"] = "";
						}
	
						if (i < protectVillagePersonListLen) {
							data["villageOfficer"] = res.data.data.protectVillagePersonList[i]["name"];
							data["villageOfficerPhone"] = res.data.data.protectVillagePersonList[i][
								"phoneNumber"
							];
						} else {
							data["villageOfficer"] = "";
							data["villageOfficerPhone"] = "";
						}
	
						if (i < protectSchoolPersonListLen) {
							data["schoolOfficer"] = res.data.data.protectSchoolPersonList[i]["name"];
							data["schoolOfficerPhone"] = res.data.data.protectSchoolPersonList[i][
							"phoneNumber"];
						} else {
							data["schoolOfficer"] = "";
							data["schoolOfficerPhone"] = "";
						}
	
						valiFormData.value.jieduibaobao.push(data);
					}
					
					console.log('valiFormData.value.guardianList');
					console.log(valiFormData.value.guardianList);
					
					console.log('valiFormData.value.jieduibaobao');
					console.log(valiFormData.value.jieduibaobao);
	
					// if (res.data.data.houseImages.length > 0) {
					// 	houseImageUrl.value =
					// 		`/dir/from/attachment/download/houseImage/${res.data.data.houseImages[0]["id"]}`;
					// 	houseImageTitle.value =
					// 		`/dir/from/attachment/download/houseImage/${res.data.data.houseImages[0]["attachmentName"]}`;
					// }
					// if (res.data.data.visitImages.length > 0) {
					// 	visitImageUrl.value =
					// 		`/dir/from/attachment/download/visitImage/${res.data.data.visitImages[0]["id"]}`;
					// 	visitImageTitle.value =
					// 		`/dir/from/attachment/download/visitImage/${res.data.data.visitImages[0]["attachmentName"]}`;
					// }
	
					valiFormData.value.houseImages = [];
					valiFormData.value.visitImages = [];
				} else if (Number(res.data.code) === 401) {
					uni.showToast({
						title: "登录超时",
						icon: "error",
					});
					uni.removeStorageSync("accessToken");
					uni.reLaunch({
						url: "/pages/login/index", // 这里的URL是登录页面的路径
					});
				} else {
					uni.showToast({
						title: res.data.message,
						icon: "error",
					});
				}
			},
			fail: (err) => {
				console.error("请求失败", err);
				uni.showToast({
					title: "连接失败",
					icon: "error",
				});
			},
		});
	}
	
	onLoad((options) => {
		handleGetDetail(options.id)
	})
</script>

<style lang="scss" scoped>
	.wrapper::v-deep .scroll-wrapper {
		white-space: nowrap;
		overflow-x: auto;
		// margin-bottom: 30rpx;
		-webkit-overflow-scrolling: touch;

		/* 隐藏滚动条 */
		&::-webkit-scrollbar {
			display: none;
		}
	}

	.wrapper::v-deep .segmented-control {
		display: block !important;
		overflow: auto !important;
	}

	.wrapper::v-deep .uni-segmented-control-wrapper {
		border-radius: 10rpx;
		padding: 0;
		background-color: #ffffff;

		.content {
			height: calc(100vh - 230rpx) !important;
			overflow: auto;
		}
	}

	.wrapper::v-deep .segmented-control__item--button {
		height: 100% !important;
	}

	.wrapper::v-deep .segmented-control__text {
		padding: 0 20rpx !important;
		height: 100% !important;
		line-height: 40rpx !important;
	}

	.wrapper::v-deep .uni-select__input-placeholder {
		font-size: 16px;
		color: #808080 !important;
	}

	.wrapper::v-deep .uni-date__x-input {
		font-size: 16px;
		color: #808080 !important;
	}

	.wrapper::v-deep .uni-select__selector-item {
		font-size: 16px !important;
	}

	.rule-form {
		border-radius: $myuni-border-radius-base;
		padding: $myuni-spacing-lg;
		background-color: $myuni-bg-color;
		margin-bottom: $myuni-spacing-lg;
		// box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.05);
	}

	.uni-forms::v-deep .uni-easyinput__content-input {
		font-size: $myuni-font-size-lg !important;
		color: $myuni-text-color-grey !important;
	}

	.uni-forms::v-deep .uni-easyinput__placeholder-class {
		font-size: $myuni-font-size-lg !important;
		color: $myuni-text-color-grey !important;
	}

	.uni-forms::v-deep .uni-select__input-text {
		font-size: $myuni-font-size-lg !important;
		color: $myuni-text-color-grey !important;
	}

	.uni-forms::v-deep .uni-textarea-placeholder {
		font-size: $myuni-font-size-lg !important;
		color: $myuni-text-color-grey !important;
	}

	.wrapper::v-deep .uni-forms-item {
		margin-bottom: $myuni-spacing-super-lg !important;
	}

	.uni-form-item .title {
		padding: 20rpx 0;
	}

	.rule-form::v-deep .uni-forms-item__label {
		display: none;
	}

	.rule-form::v-deep .is-input-border {
		border: 1px solid $myuni-bg-color-grey !important;
	}

	.rule-form::v-deep .uni-select {
		border: 1px solid $myuni-bg-color-grey !important;
	}

	.wrapper::v-deep .button-container button {
		// display: flex;
		// align-items: center;
		display: block;
		font-size: $myuni-font-size-lg !important;
		color: $myuni-text-color-grey !important;
		// word-break: break-all;
		// justify-content: space-around;
	}

	.wrapper::v-deep .button-container span {
		display: block;
		word-break: break-all;
		// padding: $myuni-spacing-base 0;
	}
</style>